<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<link rel="stylesheet" href="./css/elementplus.css" />
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="./js/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/elementplus.js"></script>
		<script src="./js/jquery.js"></script>
	</head>
	<body>
		<div id="app">
			<el-dialog :before-close="close" v-model="dialogVisible" title="选择部门" width="80vw">
				<div>
					<el-input v-model="input" placeholder="请输入部门名称" clearable />
				</div>
				<div class="tree">
					<el-tree default-expand-all ref="treeRef" :filter-node-method="filterNode" :props="props"
						:data="data" node-key="id" :default-checked-keys="defaultchecked" />
				</div>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="close">取消</el-button>
						<el-button type="primary" @click="submit">
							提交
						</el-button>
					</span>
				</template>
			</el-dialog>

		</div>
		<script>
			const App = {
				data() {
					return {
						counter: 0,
						props: {
							label: 'title',
							children: 'children',
						},
						defaultchecked: [],
						data: [],
						dialogVisible: true,
						input: ''
					}
				},
				methods: {
					close() {
						this.input = ''
						parent.hide()
					},
					submit() {
						let data = this.$refs.treeRef.getCurrentNode()
						if (data) {
							this.input = ''
							parent.getData(data)
						} else {
							this.$message({
								message: '请选择部门',
								type: 'warning'
							})
						}
					},
					getData() {
						let that = this
						$.ajax({
							url: 'http://devtx.tsipark.com/_Face_API/BIO_Center/Get_Department.aspx',
							dataType: 'json',
							success(res) {
								that.data = res.data
							}
						})
					},
					filterNode(value, data) {
						if (!value) return true
						return data.title.includes(value)
					}
				},
				watch: {
					input(val) {
						this.$refs.treeRef.filter(val)
					}
				},
				created() {
					this.getData()
				}
			};
			const app = Vue.createApp(App);
			app.use(ElementPlus);
			app.mount("#app");
		</script>
	</body>
	<style>
		.tree {
			max-height: 60vh;
			overflow-y: scroll;
			margin-top: 20px;
		}

		.el-dialog {
			margin: auto;
		}

		body {
			overflow: hidden;
		}

		.el-overlay-dialog {
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	</style>
</html>